import Svg, {
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';

/* Use this if you are using Expo
import { Svg } from 'expo';
const { Circle, Rect } = Svg;
*/

import React from 'react';
import {View, StyleSheet, Dimensions} from 'react-native';

// Percentages work in plain react-native but aren't supported in Expo yet, workaround with this or onLayout
const {width, height} = Dimensions.get('window');

export default class SvgExample18 extends React.Component {


  render() {
    return (
      <View style={{...StyleSheet.absoluteFill, alignItems: 'center', justifyContent: 'center'}}>
        <Svg width="100%" height="100%" viewBox="0 0 800 400">
          <Defs>
            <Pattern
              id="TrianglePattern"
              patternUnits="userSpaceOnUse"
              x="0"
              y="0"
              width="100"
              height="100"
              viewBox="0 0 10 10"
            >
              <Path d="M 0 0 L 7 0 L 3.5 7 Z" fill="red" stroke="blue" />
            </Pattern>
          </Defs>
          <Rect
            fill="none"
            stroke="blue"
            x="1"
            y="1"
            width="798"
            height="398"
          />
          <Ellipse
            fill="url(#TrianglePattern)"
            stroke="black"
            stroke-width="5"
            cx="400"
            cy="200"
            rx="350"
            ry="150"
          />
        </Svg>
      </View>
    );
  }
}